// import AccreditIcon from '@/components/accreditDia/AccreditIcon'
import { Card, Tooltip } from 'antd'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import '../css/styles.css'
import CallTags from './tags'

export default function CallCont({ datalist, SearchList, handleDelete, diaEdit, onAccreditDia }) {
  const { t } = useTranslation()

  /* 控制显示icon */
  const [isHovering, setIsHovering] = useState(false)
  const [isHoverNum, setIsHoverNum] = useState(0)
  const handleMouse = (i: number, type) => {
    setIsHoverNum(type === 'over' ? i + 1 : 0)
    setIsHovering(type === 'over')
  }
  return (
    <div className="call_cardJut flexRowStart flexWrap gap-[16px]" style={{ margin: '0', padding: '0 0 50px' }}>
      {datalist.map((el: any, i: number) => {
        return (
          <Card
            hoverable
            key={el.id}
            className="call_card"
            style={{ cursor: 'default' }}
            onMouseOver={() => {
              handleMouse(i, 'over')
            }}
            onMouseOut={() => {
              handleMouse(i, 'out')
            }}
          >
            <div className="flexRow flexRowJustBet">
              <div className="flexRowStart" style={{ width: '80%' }}>
                <h1 className="call_card_name domOverflowEllip">{el.name}</h1>
                {/* eslint-disable-next-line array-callback-return */}
                {SearchList.map(item => {
                  if (item.id === el.category) {
                    return <CallTags key={item.id} name={item.label} id={item.id}></CallTags>
                  }
                })}
              </div>
              {/* icon 编辑 删除 */}
              {isHovering && i + 1 === isHoverNum && (
                <div className="flexRow">
                  {/* <Tooltip title="授权">
                    <AccreditIcon
                      style={{ marginRight: '4px' }}
                      className="cursonCase"
                      onClick={() => onAccreditDia()}
                    />
                  </Tooltip> */}
                  <Tooltip title={t('edit')}>
                    <svg
                      style={{ marginRight: '4px' }}
                      className="cursonCase"
                      onClick={() => diaEdit(el)}
                      width="28"
                      height="28"
                      viewBox="0 0 28 28"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9.34993 7.33301C9.17484 7.33301 9.00146 7.3675 8.83969 7.4345C8.67792 7.50151 8.53094 7.59972 8.40713 7.72353C8.28331 7.84734 8.1851 7.99433 8.1181 8.1561C8.05109 8.31786 8.0166 8.49125 8.0166 8.66634V19.333C8.0166 19.5081 8.05109 19.6815 8.1181 19.8433C8.1851 20.005 8.28331 20.152 8.40713 20.2758C8.53094 20.3996 8.67792 20.4978 8.83969 20.5648C9.00146 20.6319 9.17484 20.6663 9.34993 20.6663H12.0166V19.3997L18.6833 12.733V11.333L14.6833 7.33301H9.34993ZM14.0166 8.33301L17.6833 11.9997H14.0166V8.33301ZM18.7499 14.6663C18.6497 14.683 18.5568 14.7295 18.4833 14.7997L17.8166 15.4663L19.2166 16.8663L19.8833 16.1997C20.0166 16.0463 20.0166 15.8197 19.8833 15.6663L19.0166 14.7997C18.9849 14.759 18.9445 14.7259 18.8983 14.7029C18.8522 14.6798 18.8015 14.6673 18.7499 14.6663ZM17.4166 15.8663L13.3499 19.933V21.333H14.7499L18.8166 17.2663L17.4166 15.8663Z"
                        fill="#7587A5"
                      />
                    </svg>
                  </Tooltip>
                  <Tooltip title={t('delete')}>
                    <svg
                      onClick={() => handleDelete(el.id)}
                      className="cursonCase"
                      width="28"
                      height="28"
                      viewBox="0 0 28 28"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M18.6668 8.66667H16.3335L15.6668 8H12.3335L11.6668 8.66667H9.3335V10H18.6668M10.0002 18.6667C10.0002 19.0203 10.1406 19.3594 10.3907 19.6095C10.6407 19.8595 10.9799 20 11.3335 20H16.6668C17.0205 20 17.3596 19.8595 17.6096 19.6095C17.8597 19.3594 18.0002 19.0203 18.0002 18.6667V10.6667H10.0002V18.6667Z"
                        fill="#7587A5"
                      />
                    </svg>
                  </Tooltip>
                </div>
              )}
            </div>
            <p className="carr_cont domOverflowEllip_thr">{el?.content || t('call.empty') + t('call.callTemCont')}</p>
          </Card>
        )
      })}
    </div>
  )
}
